<template>
  <div>
    <!-- 首页顶部 -->
    <home-header></home-header>
    <!-- 首页轮播图组件 -->
    <home-swiper :swiperList="swiperList"></home-swiper>
    <!-- 首页Icon区域 -->
    <home-incons :iconLits="iconLits"></home-incons>
    <!-- 首页热销推荐区域 -->
    <home-recommend :Recommendlist="Recommendlist"></home-recommend>
    <!-- 周末去哪儿推荐区域-->
    <index-week :Weeklist="Weeklist"></index-week>
  </div>
</template>

<script>
import HomeHeader from './commpotens/Header.vue'
import HomeSwiper from './commpotens/Index_swiper.vue'
import HomeIncons from './commpotens/Index_icons.vue'
import HomeRecommend from './commpotens/Recommend.vue'
import IndexWeek from './commpotens/Index_Week.vue'
/* 引入axios 实现ajax请求，需要提前安装： npm install axios --save */
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIncons,
    HomeRecommend,
    IndexWeek
  },
  data () {
    return {
      swiperList: [],
      iconLits: [],
      Recommendlist: [],
      Weeklist: [],
      /* 城市临时变量，用于判断城市是否发生了变化 */
      cityLess: ''
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json?city=' + this.$store.state.city).then(this.getHomeInfoSecc)
    },
    getHomeInfoSecc (res) {
      res = res.data
      if (res.ret && res.data) {
        const rest = res.data
        this.swiperList = rest.swiperList
        this.iconLits = rest.iconLits
        this.Recommendlist = rest.Recommendlist
        this.Weeklist = rest.Weeklist
      }
    }
  },
  mounted () {
    /* 生命周期钩子,第一次请求首页时发送Ajax请求 */
    this.getHomeInfo()
    /* 城市临时变量，用于判断城市是否发生了变化 */
    this.cityLess = this.$store.state.city
  },
  activated () {
    /* activated生命周期时针对于keep-alive标签的，只要被包裹的标签都会执行一个activated方法 */
    /* 如果临时城市变量不等于当前城市 则重新发送Ajax请求 */
    if (this.cityLess !== this.$store.state.city) {
      this.getHomeInfo()
      this.cityLess = this.$store.state.city
    }
  }
}
</script>

<style>
</style>
